<template>
    <div class="headerNav">
        <div class="header-logo">
            <img src="@/assets/images/logo.png" alt="">
        </div>
        <div class="header-search">

            <el-input style="max-width: 600px" placeholder="请输入内容" class="input-with-select">
                <template #append>
                    <el-button :icon="Search" />
                </template>
            </el-input>

        </div>
        <div class="header-right">
            <el-link :icon="User">请登录</el-link>

            <el-link type="primary">注册</el-link>


            <el-dropdown>
                <span class="el-dropdown-link">
                    我的订单
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="v in myOrder" :key="v.id">{{ v.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>




<script setup lang="ts">
import { ref } from 'vue'
import { Search, User, ArrowDown } from '@element-plus/icons-vue'

// 我的订单
let myOrder = ref([
    { id: 1, name: "酒店订单" },
    { id: 1, name: "火车票订单" },
    { id: 1, name: "飞机票订单" },
    { id: 1, name: "旅游订单" },
    { id: 1, name: "全部订单" }
])
</script>



<style scoped></style>